<template>
<!-- 基础题库 -->
  <div class='container'>
    <el-card>
        <div class="addText">
          <el-button type="primary" @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
        <!-- 筛选表单区域 -->
        <el-form inline class="el-form" label-width="130px">

          <el-form-item label="学科">
             <el-select v-model="query.subjectID"  placeholder="请选择">
                 <el-option
                 :label="item.subjectName"
                 :value="item.id"
                 v-for="(item, index) in subject"
                 :key="index"
                 >{{item.subjectName}}</el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="二级目录">
            <el-select placeholder="请选择">
              </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-select  placeholder="请选择">
              </el-select>
          </el-form-item>

          <el-form-item label="关键词">
            <el-input class="input-style"></el-input>
          </el-form-item>

          <el-form-item label="试题类型">
            <el-select v-model="query.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <!-- <el-option label="简答" ></el-option> -->
              </el-select>
          </el-form-item>

          <el-form-item label="难度">
            <el-select v-model="query.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="录入人">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input class="input-style"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-select style="width:110px" placeholder="请选择">

              </el-select>
            <el-select style="width:110px" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="onCancel">取消</el-button>
            <el-button  type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据提示 -->
        <el-alert
          :title="'数据一共'+ total +'条'"
          type="info">
        </el-alert>
        <!-- 表单区域 -->
         <el-table :data="list" style="width: 100%">
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
               <span v-if="scope.row.questionType === '1'">
                 {{scope.row.questionType}}
                 单选题</span>
               <span v-else>
                 {{scope.row.questionType}}
                 多选题</span>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干">
            <template slot-scope="scope">
               <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              {{scope.row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度">
            <template slot-scope="scope">
               <span v-if="scope.row.difficulty === '1'">简单</span>
               <span v-else>困难</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"></el-table-column>
          <el-table-column prop="date" label="操作" width="170px">
            <template slot-scope="scope">
               <el-button type="primary" icon="el-icon-view" circle size="mini" @click="preview(scope.row)"></el-button>
               <el-button type="success" icon="el-icon-edit" circle size="mini" @click="toQuestionnew(scope.row)"></el-button>
               <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteDetail(scope.row)"></el-button>
               <el-button type="warning" icon="el-icon-check" circle size="mini" @click="importDetail(scope.row.id, 1)"></el-button>
            </template>
          </el-table-column>
         </el-table>
         <!-- 分页功能 -->
          <el-pagination
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="query.pagesize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!-- 预览弹框 -->
        <el-dialog
          title="题目预览"
          :visible.sync="previewDialogVisible">
          <!-- 预览组件子 -->
          <questions-preview
          :scope="scope"
          :details="details"
          v-if="previewDialogVisible"/>
          <span slot="footer" class="dialog-footer">
            <el-button @click="previewDialogVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
      </el-card>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview.vue'
import { list as tlist } from '@/api/hmmm/subjects'
export default {
  name: 'questions',
  components: {
    questionsPreview
  },
  data () {
    return {
      list: {},
      scope: {},
      details: {},
      subject: {},
      query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        questionType: null,
        difficulty: null
      },
      total: 0,
      previewDialogVisible: false
    }
  },
  methods: {
    // 获取题库列表
    async loadList () {
      try {
        const { data } = await list({
          page: this.query.page,
          pagesize: this.query.pagesize,
          subjectID: this.query.subjectID,
          questionType: this.query.questionType,
          difficulty: this.query.difficulty
        })
        console.log(data)
        this.list = data.items
        this.total = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    async loadSubject () {
      try {
        const { data } = await tlist()
        console.log(data)
        this.subject = data.items
      } catch (err) {
        console.log(err)
      }
    },

    // 获取题库详情
    async loadDetail (scope) {
      try {
        const { data } = await detail({
          id: scope.id
        })
        console.log(data)
        this.details = data
      } catch (err) {
        console.log(err)
      }
    },
    // 基础题库删除
    async deleteDetail (scope) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        await remove({
          id: scope.id
        })
        this.loadList()
      } catch (err) {
        this.$message.info('取消删除')
      }
    },
    // 精选题库加入取消
    async importDetail (id, num) {
      try {
        await choiceAdd({
          id,
          choiceState: num
        })
        this.loadList()
      } catch (err) {
        console.log(err)
      }
    },
    handleSizeChange (newsize) {
      this.query.pagesize = newsize
      this.loadList()
    },
    handleCurrentChange (newnum) {
      this.query.page = newnum
      this.loadList()
    },
    // 搜索查询
    onSearch () {
      this.query.page = 1
      this.loadList()
    },
    // 取消重置
    onCancel () {
      this.loadList()
      this.query = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        questionType: null,
        difficulty: null
      }
    },
    // 预览弹框
    preview (scope) {
      this.previewDialogVisible = true
      console.log(scope)
      this.scope = scope
      this.loadDetail(scope)
    },
    toQuestionnew (scope) {
      this.$router.push({ path: '/questions/new', query: { id: scope.id } })
    }

  },
  created () {
    this.loadList()
    this.loadSubject()
  }

}
</script>

<style scoped>
.addText{
  display: flex;
  justify-content:flex-end
}
.page{
  margin-top: 10px;
  display: flex;
  justify-content:flex-end
}
.input-style{
   width:220px;
}
.container{
  padding: 10px;
}

</style>
